<template>
  <div class="map">
    <div id="container"></div>
    <div class="input-card" style='width:20rem;'>
      <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
        <el-input v-model="loaction.address" @blur="inputBtn" placeholder="请输入地址"></el-input>
      </div>
      <div class="input-item" style="margin-top: 20px;">
        <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
        <el-input v-model="loaction.loactions"  placeholder="请输入地址"></el-input>
      </div>
<!--      <input id="geo" type="button" class="btn" value="地址 -> 经纬度" />-->
      <el-button @click="btnOk" type="primary" style="margin:20px  60px  0px 80px  ;" >确定</el-button>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
  name: "map",
  data(){
    return{
      //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
      //map:null,

      loaction:{
        address:'',
        longitude:'',
        latitude:'',
        loactions:'',
        mapOpen:false
      },
      form:''
    }
  },
  mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  created(){

  },
  methods:{
    initMap(){
      AMapLoader.load({
        key:"fd840be990ce8278579f097b80f357e6",             // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins:['AMap.Geocoder'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap)=>{
        this.map = new AMap.Map("container",{  //设置地图容器id
          zoom:12,//级别
          // center: [116.397428, 39.90923],//中心点坐标
          viewMode:'3D'//使用3D视图
        });
      }).catch(e=>{
        console.log(e);
      })
    },
    btnOk(){
      this.$emit('mapBtn',this.loaction)
      this.loaction={
           address:'',
          longitude:'',
          latitude:'',
          loactions:'',
          mapOpen:false
      }
    },
    inputBtn(){
      var that =this
      AMap.plugin('AMap.Geocoder', function() {
        var geocoder = new AMap.Geocoder({
          // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
          // city: '安徽师范大学'
        })
        var address=that.loaction.address
        console.log(address)
        geocoder.getLocation(address, function(status, result) {
          console.log(status, result)
          if (status === 'complete' && result.info === 'OK') {
            // result中对应详细地理坐标信息
            that.loaction.loactions=`${result.geocodes[0].location.lat}`+`,`+`${result.geocodes[0].location.lng}`
            that.loaction.latitude=result.geocodes[0].location.lat
            that.loaction.longitude=result.geocodes[0].location.lng
            that.loaction.address=result.geocodes[0].formattedAddress

          }
        })



      })

    },

  },
}
</script>

<style  scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 650px;
}
.map{
  position: relative;
}

.input-card{
  position: absolute;
  left: 30px;
  top: 30px;
  padding: 20px;

  background-color: #fff;
}
.input-item{
  display: flex;
  align-items: center;
}
.input-item-prepend{
  width: 100px;
  text-align: center;
}

</style>
